/**
 *  学习目标：
 */
import React from 'react'
import Find from './views/Find'
import My from './views/My'

export default class App extends React.Component {
  state = {
    currentHash: '/find',
  }

  componentDidMount() {
    // hashchange事件：当地址栏的 哈希值 发生了变化就会触发
    window.onhashchange = () => {
      // console.log('哈希值变了', window.location.hash) // #/index
      const hash = window.location.hash.slice(1)
      // console.log(hash)
      this.setState({ currentHash: hash })
    }
  }

  render() {
    return (
      <>
        <h1>仿网易云音乐路由-公共的头部</h1>
        <a href='#/find'>发现音乐</a>
        <br />
        <a href='#/my'>我的音乐</a>
        {this.state.currentHash === '/find' ? <Find /> : null}
        {this.state.currentHash === '/my' ? <My /> : null}
      </>
    )
  }
}
